
<template>
  <div class="app">
    <div class="content">
      <router-view></router-view>
      <Player />
    </div>
    <TabBar />
    <PlayerDetail />
  </div>
</template>

<script setup>
import Player from '@/views/Player.vue'
import TabBar from '@/components/TabBar.vue'
import PlayerDetail from '@/views/PlayerDetail.vue';
</script>

<style lang="scss">
.app {
  min-height: 100vh;
  height: 100vh; // 添加固定高度
  display: flex;
  flex-direction: column;
  position: relative; // 添加相对定位

  .content {
    flex: 1;
    padding-bottom: 105px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; // 添加移动端滚动优化
  }
}

// 添加移动端视口适配
@media screen and (max-width: 768px) {
  .app {
    height: -webkit-fill-available; // 适配 iOS
    min-height: -webkit-fill-available;
  }
}
</style>
